<template>
  <DetailsFormBox :title="dataInfo?.table?.title" :type="data.type" :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      click: (form: any) => {
        saveBtn(form)
      },
    },
  ]" :loading="data.loading" :json="dataInfo">
    <template #default="{ form }">
      <div class="formMain">
        <ElFormItemBox label="颜色编号" :prop="`colorCode`">
          <ElInputBox :data="form.colorCode" disabled placeholder="系统自动生成" />
        </ElFormItemBox>
        <ElFormItemBox label="颜色类型" :prop="`colorType`" isRules>
          <ElRadioBox :data="form" dataName="colorType" :options="[
            {
              label: '普通',
              value: 1,
            },
            {
              label: '专色',
              value: 2,
            },
          ]" />
        </ElFormItemBox>
        <!-- <ElFormItemBox label="使用类型" :prop="`useType`" isRules>
          <ElRadioBox :data="form" dataName="useType" :options="[
            {
              label: '业务开单',
              value: 1,
            },
            {
              label: '彩稿上传',
              value: 2,
            },
          ]" />
        </ElFormItemBox> -->
        <ElFormItemBox label="颜色名称" :prop="`colorName`" isRules>
          <ElInputBox :data="form" dataName="colorName" />
        </ElFormItemBox>
        <ElFormItemBox label="HEX值" :prop="`colorValue`">
          <ElColorBox :data="form" dataName="colorValue" />
        </ElFormItemBox>
        <ElFormItemBox label="CMYK值" :prop="`cmykValue`">
          <ElInputBox :data="form" dataName="cmykValue" />
        </ElFormItemBox>
        <ElFormItemBox label="排序" :prop="`colorSort`">
          <ElNumberBox :data="form" dataName="colorSort" />
        </ElFormItemBox>
        <ElFormItemBox label="备注" :prop="`colorRemark`">
          <ElInputBox :data="form" dataName="colorRemark" type="textarea" />
        </ElFormItemBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { useListComponent } from '../pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
import { useRoute } from 'vue-router';
const route = useRoute();
const data = reactive({
  loading: false,
  loadingMsg: '',
  type: route.query.type,
  form: {
    useType: 2, // 使用分类：1业务开单；2彩稿上传
    colorType: 0, // 颜色类型：1普通；2专色
    colorName: "", // 颜色名称
    colorValue: "", // HEX/HTML颜色值，如：#FDE888、red等
    cmykValue: '', // CMYK值
    colorSort: 0, // 颜色排序号
    colorRemark: "" // 颜色备注说明
  },
});

import { sendMsg } from '@/utils/crossTagMag.ts';
const saveBtn = (form: any) => {
  let _form: any = {
    ...form
  }
  if (form.colorID) {
    proxy.$api.System.UpdatePrintingColor(_form)
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  } else {
    proxy.$api.System.AddPrintingColor({
      ..._form,
    })
      .then((res: any) => {
        _sun()
      })
      .catch(() => { });
  }

  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    // getForm()
    window.close();
  }
};
const getForm = () => {
  let _query: any = route.query
  if (_query.colorID) {
    proxy.$api.System.QueryPrintingColorDetail({
      colorID: _query.colorID,//获取数据传递的查询参数值（主键ID或唯一识别码）
    })
      .then((res: any) => {
        proxy.$message('获取成功')
        data.form = {
          ...res,
        }
      })
      .catch(() => {
      });
  }

};

onMounted(() => {
  getForm();
});
</script>
